<template>
	<view class="SortFilter">
		<view class="sortnav1" id="sortnav" v-if="!isShow">
			<view class="sort_item  f24" :class="item.select?'sortActive':''" v-for="(item,index) in list" :key="index"
				@click="clickToggleHandle(item,index)">
				{{item.label}}
			</view>
		</view>

		<view class="sortbox" :style="[mergeStyle]" v-if="isShow">
			<!-- 顶部导航 -->
			<view class="sortnav">
				<view class="sort_item  f24" :class="item.select?'sortActive':''" v-for="(item,index) in list"
					:key="index" @click="clickToggleHandle(item,index)">
					{{item.label}}
				</view>
			</view>
			<!-- 分类 -->
			<view class="select_box">
				<view class="allclassify" v-if="type == 'cascader'">
					<!-- 左侧一级分类 -->
					<view class="flex_Z cla_box">
						<view class="f28 cla_box_left" :class="{sortOneActive:sortClaIndex==index}"
							v-for="(item,index) in sortList" :key="item.id" @click="selectSort(index)">
							{{item.name}}
						</view>
					</view>
					<!-- 右侧二级分类 -->
					<view class="flex_Z cla_box cla_right">
						<view class="f28 cla_box_right" v-for="(item,index) in sortList[sortClaIndex].children"
							:class="{sortOneActive:sortTwoIndex==index}" :key="item.id" @click="getlist(item,index)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="" v-if="type == 'picker'" @touchmove.stop.prevent="() => {}">
					<view class="flex_dq btn_box">
						<view class="btn_box_item f28" v-for="(item,index) in list[sortIndex].children" :key="index"
							:class="{sortBtnActive:platIndex['sortIndex' + sortIndex]==index}"
							@click="getlist(item,index)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isShow" class="scroll-mask" @touchmove.stop.prevent="() => {}" @click.stop="isMask ? close() : ''">
		</view>
	</view>
</template>

<script>
	import {
		logOff
	} from '../api/other'
	// list 的接收格式 分为cascader, text, picker，相应数据格式按照以下方式
	// tablist: [{
	// 			label: "",
	// 			type: "cascader",
	// 			select: false
	// 		},
	// 		{
	// 			label: "",
	// 			type: "text",
	// 			sort_type: '',
	// 			select: false
	// 		},
	// 		{
	// 			label: "",
	// 			type: "picker",
	// 			sort_type: '',
	// 			select: false,
	// 			children: [{
	// 				name: "",
	// 				sort_type: ''
	// 			}]
	// 		}
	// 	],
		export default {
			props: {
				isMask: {
					type: Boolean,
					default: true,
				},
				// 是否吸顶位置
				isSticky: {
					type: Boolean,
					default: false
				},
				// 分类列表
				sortList: {
					type: Array,
					default: () => []
				},
				// 顶部导航栏内容
				list: {
					type: Array,
					default: () => []
				},
				topHeight: {
					type: String | Number,
					default: ''
				}
			},
			computed: {
				mergeStyle() {
					return {
						background: this.isShow ? '#ffffff' : '',
						top: (this.topHeight) + 'px'
					}
				},
			},
			data() {
				return {
					// 选中的顶部导航
					sortIndex: null,
					// 选中的一级分类
					sortClaIndex: 0,
					sortTwoIndex: null,
					isShow: false,
					platform: 0,
					platIndex: {},
					platValue: {},
					// 下拉类型  cascader:多层级下拉; picker:按钮选择; text:文字选择 
					type: "",
					sortType: '',
					// 二级分类id
					classify_id: ""
				}
			},
			methods: {
				open() {
					this.isShow = true
				},
				close() {
					this.isShow = false
				},
				selectSort(index) {
					this.sortClaIndex = index
					this.sortTwoIndex = null
				},
				clickToggleHandle(ele, index) {
					if (ele.sort_type) {
						this.sortType = ele.sort_type
					}
					this.type = ele.type
					if (ele.type == 'text') {
						const data = {
							index,
							sortType: this.sortType,
							id: this.classify_id
						}
						this.$emit('change', data)
					} else {
						this.$emit('changescroll')
						this.sortIndex = index
					}

				},
				getlist(item, index) {
					console.log(item, index);
					if (this.type == 'cascader') {
						this.sortTwoIndex = index
					}
					if (item.sort_type) {
						this.sortType = item.sort_type
					}
					if (item.id != null) {
						this.classify_id = item.id || ''
					}
					const data = {
						index: this.sortIndex,
						label: item.name,
						sortType: this.sortType,
						id: this.classify_id
					}
					this.$emit('change', data)
					this.close()
				}
			}
		}
</script>

<style lang="scss" scoped>
	.sortbox {
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 999;
		position: fixed;
	}

	.sortnav {
		width: 100%;
		padding: 0 50rpx;
		background: #ffffff;
		line-height: 76rpx;
		display: flex;
		justify-content: space-between;
	}

	.sortnav1 {
		width: 100%;
		padding: 0 50rpx;
		line-height: 76rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 9999999;
	}

	.sortActive {
		color: #FFC300;
	}

	.sort_item {
		display: flex;
		align-items: center;
	}

	.select_box {
		width: 100%;
		background: #fff;
		position: absolute;
		top: 76rpx;
	}

	.allclassify {
		display: flex;
	}

	.cla_box {
		width: 200rpx;
		max-height: 700rpx;
		overflow: auto;
	}

	.cla_box_left {
		height: 72rpx;
		text-align: center;
		line-height: 72rpx;
		color: #333333;
	}

	.cla_right {
		width: calc(100vw - 200rpx);
		background: #f5f5f5;
		max-height: 700rpx;
		overflow: auto;
		padding-left: 56rpx;
	}

	.cla_box_right {
		height: 72rpx;
		line-height: 72rpx;
		color: #333333;
	}

	.sortOneActive {
		background: #f5f5f5;
		color: #FFC300;
	}

	.btn_box {
		padding: 0 30rpx 30rpx;
		gap: 30rpx;
		flex-wrap: wrap;
	}

	.btn_box_item {
		width: 150rpx;
		height: 64rpx;
		background: #F5F5F5;
		border-radius: 12rpx;
		color: #333333;
		text-align: center;
		line-height: 64rpx;
	}

	.sortBtnActive {
		background: rgba(225, 195, 0, 0.15);
		color: #FFC300;
	}

	.scroll-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 998;
	}
</style>